<template>
  <div class="sidebar-container">
    <div class="logo-container">
      <router-link to="/back/dashboard" class="logo-link">
        <div class="logo-wrapper">
          <img src="@/assets/logo.png" alt="学习平台" class="logo-image" />
          <div class="logo-text">
            <span class="text-learn">学无止境</span>
     
          </div>
        </div>
      </router-link>
    </div>

    <div class="menu-container">
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          :unique-opened="true"
          :collapse-transition="false"
          class="sidebar-menu"
        >
          <template v-for="menu in menus">
            <!-- 无子菜单的情况 -->
            <el-menu-item 
              v-if="!menu.children?.length" 
              :index="menu.path"
              :key="menu.path"
              @click="handleMenuClick(menu)"
            >
              <el-icon><component :is="menu.icon" /></el-icon>
              <template #title>
                <span>{{ menu.title }}</span>
              </template>
            </el-menu-item>

            <!-- 有子菜单的情况 -->
            <el-sub-menu 
              v-else 
              :index="menu.path"
              :key="menu.path"
            >
              <template #title>
                <el-icon><component :is="menu.icon" /></el-icon>
                <span>{{ menu.title }}</span>
              </template>

              <el-menu-item
                v-for="subMenu in menu.children"
                :key="subMenu.path"
                :index="subMenu.path"
                @click="handleMenuClick(subMenu)"
              >
                <el-icon><component :is="subMenu.icon" /></el-icon>
                <template #title>
                  <span>{{ subMenu.title }}</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'


const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const activeMenu = computed(() => route.path)

const menus = computed(() => {
  const isAdmin = userStore.userInfo?.role === 'ADMIN'
  const baseMenus = [
    {
      path: '/back/dashboard',
      title: '仪表盘',
      icon: 'HomeFilled'
    },
    {
      path: '/back/courses',
      title: '课程管理',
      icon: 'Reading'
    },
    {
      path: '/back/reviews',
      title: '评价管理',
      icon: 'ChatDotRound'
    },
    {
      path: '/back/announcements',
      title: '公告管理',
      icon: 'Bell'
    },
    {
      path: '/back/categories',
      title: '课程分类',
      icon: 'Folder'
    },
    {
      path: '/back/favorites',
      title: '收藏管理',
      icon: 'Star'
    },
      {
      path: '/back/users',
      title: '用户管理',
      icon: 'User'
    }
  ]


  return isAdmin ? [...baseMenus] : baseMenus
})

const handleMenuClick = (menu) => {
  router.push(menu.path)
}
</script>

<style lang="scss" scoped>
  @import '@/assets/styles/menu.scss';
  
  .logo-image {
    height: 30px;
    width: auto;
    margin-right: 10px;
  }
  
  .logo-wrapper {
    display: flex;
    align-items: center;
    padding: 0 15px;
  }
</style> 